import { themeColorsToCssVariables } from "~/lib/charts"

export const CHART_THEMES = [
   {
      name: "Default",
      id: "default-nyxb",
      colors: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
         card: "0 0% 100%",
         "card-foreground": "240 10% 3.9%",
         popover: "0 0% 100%",
         "popover-foreground": "240 10% 3.9%",
         primary: "240 5.9% 10%",
         "primary-foreground": "0 0% 98%",
         secondary: "240 4.8% 95.9%",
         "secondary-foreground": "240 5.9% 10%",
         muted: "240 4.8% 95.9%",
         "muted-foreground": "240 3.8% 46.1%",
         accent: "240 4.8% 95.9%",
         "accent-foreground": "240 5.9% 10%",
         destructive: "0 84.2% 60.2%",
         "destructive-foreground": "0 0% 98%",
         border: "240 5.9% 90%",
         input: "240 5.9% 90%",
         ring: "240 10% 3.9%",
         "chart-1": "173 58% 39%",
         "chart-2": "12 76% 61%",
         "chart-3": "197 37% 24%",
         "chart-4": "43 74% 66%",
         "chart-5": "27 87% 67%",
      },
      colorsDark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
         popover: "240 10% 3.9%",
         "popover-foreground": "0 0% 98%",
         primary: "0 0% 98%",
         "primary-foreground": "240 5.9% 10%",
         secondary: "240 3.7% 15.9%",
         "secondary-foreground": "0 0% 98%",
         muted: "240 3.7% 15.9%",
         "muted-foreground": "240 5% 64.9%",
         accent: "240 3.7% 15.9%",
         "accent-foreground": "0 0% 98%",
         destructive: "0 62.8% 30.6%",
         "destructive-foreground": "0 0% 98%",
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "240 4.9% 83.9%",
         "chart-1": "220 70% 50%",
         "chart-5": "160 60% 45%",
         "chart-3": "30 80% 55%",
         "chart-4": "280 65% 60%",
         "chart-2": "340 75% 55%",
      },
      fontFamily: {
         heading: {
            name: "Inter",
            type: "sans-serif",
         },
         body: {
            name: "Inter",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
   {
      name: "Palette",
      id: "default-palette",
      colors: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
         card: "0 0% 100%",
         "card-foreground": "240 10% 3.9%",
         popover: "0 0% 100%",
         "popover-foreground": "240 10% 3.9%",
         primary: "240 5.9% 10%",
         "primary-foreground": "0 0% 98%",
         secondary: "240 4.8% 95.9%",
         "secondary-foreground": "240 5.9% 10%",
         muted: "240 4.8% 95.9%",
         "muted-foreground": "240 3.8% 46.1%",
         accent: "240 4.8% 95.9%",
         "accent-foreground": "240 5.9% 10%",
         destructive: "0 84.2% 60.2%",
         "destructive-foreground": "0 0% 98%",
         border: "240 5.9% 90%",
         input: "240 5.9% 90%",
         ring: "240 10% 3.9%",
         "chart-1": "12 76% 61%",
         "chart-2": "173 58% 39%",
         "chart-3": "197 37% 24%",
         "chart-4": "43 74% 66%",
         "chart-5": "27 87% 67%",
      },
      colorsDark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
         popover: "240 10% 3.9%",
         "popover-foreground": "0 0% 98%",
         primary: "0 0% 98%",
         "primary-foreground": "240 5.9% 10%",
         secondary: "240 3.7% 15.9%",
         "secondary-foreground": "0 0% 98%",
         muted: "240 3.7% 15.9%",
         "muted-foreground": "240 5% 64.9%",
         accent: "240 3.7% 15.9%",
         "accent-foreground": "0 0% 98%",
         destructive: "0 62.8% 30.6%",
         "destructive-foreground": "0 0% 98%",
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "240 4.9% 83.9%",
         "chart-1": "220 70% 50%",
         "chart-2": "160 60% 45%",
         "chart-3": "30 80% 55%",
         "chart-4": "280 65% 60%",
         "chart-5": "340 75% 55%",
      },
      fontFamily: {
         heading: {
            name: "Inter",
            type: "sans-serif",
         },
         body: {
            name: "Inter",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
   {
      name: "Sapphire",
      id: "default-sapphire",
      colors: {
         background: "0 0% 100%",
         foreground: "222.2 84% 4.9%",
         card: "0 0% 100%",
         cardForeground: "222.2 84% 4.9%",
         popover: "0 0% 100%",
         popoverForeground: "222.2 84% 4.9%",
         primary: "221.2 83.2% 53.3%",
         primaryForeground: "210 40% 98%",
         secondary: "210 40% 96.1%",
         secondaryForeground: "222.2 47.4% 11.2%",
         muted: "210 40% 96.1%",
         mutedForeground: "215.4 16.3% 44%",
         accent: "210 40% 96.1%",
         accentForeground: "222.2 47.4% 11.2%",
         destructive: "0 72% 51%",
         destructiveForeground: "210 40% 98%",
         border: "214.3 31.8% 91.4%",
         input: "214.3 31.8% 91.4%",
         ring: "221.2 83.2% 53.3%",
         "chart-1": "221.2 83.2% 53.3%",
         "chart-2": "212 95% 68%",
         "chart-3": "216 92% 60%",
         "chart-4": "210 98% 78%",
         "chart-5": "212 97% 87%",
      },
      colorsDark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
         popover: "240 10% 3.9%",
         "popover-foreground": "0 0% 98%",
         primary: "221.2 83.2% 53.3%",
         primaryForeground: "210 40% 98%",
         secondary: "210 40% 96.1%",
         secondaryForeground: "222.2 47.4% 11.2%",
         muted: "240 3.7% 15.9%",
         "muted-foreground": "240 5% 64.9%",
         accent: "210 40% 96.1%",
         accentForeground: "222.2 47.4% 11.2%",
         destructive: "0 72% 51%",
         destructiveForeground: "210 40% 98%",
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "221.2 83.2% 53.3%",
         "chart-1": "221.2 83.2% 53.3%",
         "chart-2": "212 95% 68%",
         "chart-3": "216 92% 60%",
         "chart-4": "210 98% 78%",
         "chart-5": "212 97% 87%",
      },
      fontFamily: {
         heading: {
            name: "Inter",
            type: "sans-serif",
         },
         body: {
            name: "Inter",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
   {
      name: "Ruby",
      id: "default-ruby",
      colors: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
         card: "0 0% 100%",
         cardForeground: "240 10% 3.9%",
         popover: "0 0% 100%",
         popoverForeground: "240 10% 3.9%",
         primary: "346.8 77.2% 49.8%",
         primaryForeground: "355.7 100% 99%",
         secondary: "240 4.8% 95.9%",
         secondaryForeground: "240 5.9% 10%",
         muted: "240 4.8% 95.9%",
         mutedForeground: "240 3.8% 45%",
         accent: "240 4.8% 95.9%",
         accentForeground: "240 5.9% 10%",
         destructive: "0 72% 51%",
         destructiveForeground: "0 0% 98%",
         border: "240 5.9% 90%",
         input: "240 5.9% 90%",
         ring: "346.8 77.2% 49.8%",
         "chart-1": "347 77% 50%",
         "chart-2": "352 83% 91%",
         "chart-3": "350 80% 72%",
         "chart-4": "351 83% 82%",
         "chart-5": "349 77% 62%",
      },
      colorsDark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
         popover: "240 10% 3.9%",
         "popover-foreground": "0 0% 98%",
         primary: "346.8 77.2% 49.8%",
         primaryForeground: "355.7 100% 99%",
         secondary: "240 4.8% 95.9%",
         secondaryForeground: "240 5.9% 10%",
         muted: "240 3.7% 15.9%",
         "muted-foreground": "240 5% 64.9%",
         accent: "240 4.8% 95.9%",
         accentForeground: "240 5.9% 10%",
         destructive: "0 72% 51%",
         destructiveForeground: "0 0% 98%",
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "221.2 83.2% 53.3%",
         "chart-1": "347 77% 50%",
         "chart-2": "349 77% 62%",
         "chart-3": "350 80% 72%",
         "chart-4": "351 83% 82%",
         "chart-5": "352 83% 91%",
      },
      fontFamily: {
         heading: {
            name: "Inter",
            type: "sans-serif",
         },
         body: {
            name: "Inter",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
   {
      name: "Emerald",
      id: "default-emerald",
      colors: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
         card: "0 0% 100%",
         cardForeground: "240 10% 3.9%",
         popover: "0 0% 100%",
         popoverForeground: "240 10% 3.9%",
         primary: "142 86% 28%",
         primaryForeground: "356 29% 98%",
         secondary: "240 4.8% 95.9%",
         secondaryForeground: "240 5.9% 10%",
         muted: "240 4.8% 95.9%",
         mutedForeground: "240 3.8% 45%",
         accent: "240 4.8% 95.9%",
         accentForeground: "240 5.9% 10%",
         destructive: "0 72% 51%",
         destructiveForeground: "0 0% 98%",
         border: "240 5.9% 90%",
         input: "240 5.9% 90%",
         ring: "142 86% 28%",
         "chart-1": "139 65% 20%",
         "chart-2": "140 74% 44%",
         "chart-3": "142 88% 28%",
         "chart-4": "137 55% 15%",
         "chart-5": "141 40% 9%",
      },
      colorsDark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
         popover: "240 10% 3.9%",
         "popover-foreground": "0 0% 98%",
         primary: "142 86% 28%",
         primaryForeground: "356 29% 98%",
         secondary: "240 4.8% 95.9%",
         secondaryForeground: "240 5.9% 10%",
         muted: "240 3.7% 15.9%",
         "muted-foreground": "240 5% 64.9%",
         accent: "240 4.8% 95.9%",
         accentForeground: "240 5.9% 10%",
         destructive: "0 72% 51%",
         destructiveForeground: "0 0% 98%",
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "142 86% 28%",
         "chart-1": "142 88% 28%",
         "chart-2": "139 65% 20%",
         "chart-3": "140 74% 24%",
         "chart-4": "137 55% 15%",
         "chart-5": "141 40% 9%",
      },
      fontFamily: {
         heading: {
            name: "Inter",
            type: "sans-serif",
         },
         body: {
            name: "Inter",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
   {
      name: "Daylight",
      id: "default-daylight",
      colors: {
         background: "36 39% 88%",
         foreground: "36 45% 15%",
         primary: "36 45% 70%",
         primaryForeground: "36 45% 11%",
         secondary: "40 35% 77%",
         secondaryForeground: "36 45% 25%",
         accent: "36 64% 57%",
         accentForeground: "36 72% 17%",
         destructive: "0 84% 37%",
         destructiveForeground: "0 0% 98%",
         muted: "36 33% 75%",
         mutedForeground: "36 45% 25%",
         card: "36 46% 82%",
         cardForeground: "36 45% 20%",
         popover: "0 0% 100%",
         popoverForeground: "240 10% 3.9%",
         border: "36 45% 60%",
         input: "36 45% 60%",
         ring: "36 45% 30%",
         "chart-1": "25 34% 28%",
         "chart-2": "26 36% 34%",
         "chart-3": "28 40% 40%",
         "chart-4": "31 41% 48%",
         "chart-5": "35 43% 53%",
      },
      colorsDark: {
         background: "36 39% 88%",
         foreground: "36 45% 15%",
         primary: "36 45% 70%",
         primaryForeground: "36 45% 11%",
         secondary: "40 35% 77%",
         secondaryForeground: "36 45% 25%",
         accent: "36 64% 57%",
         accentForeground: "36 72% 17%",
         destructive: "0 84% 37%",
         destructiveForeground: "0 0% 98%",
         muted: "36 33% 75%",
         mutedForeground: "36 45% 25%",
         card: "36 46% 82%",
         cardForeground: "36 45% 20%",
         popover: "0 0% 100%",
         popoverForeground: "240 10% 3.9%",
         border: "36 45% 60%",
         input: "36 45% 60%",
         ring: "36 45% 30%",
         "chart-1": "25 34% 28%",
         "chart-2": "26 36% 34%",
         "chart-3": "28 40% 40%",
         "chart-4": "31 41% 48%",
         "chart-5": "35 43% 53%",
      },
      fontFamily: {
         heading: {
            name: "DM Sans",
            type: "sans-serif",
         },
         body: {
            name: "Space Mono",
            type: "monospace",
         },
      },
   },
   {
      name: "Midnight",
      id: "default-midnight",
      colors: {
         background: "240 5% 6%",
         foreground: "60 5% 90%",
         primary: "240 0% 90%",
         primaryForeground: "60 0% 0%",
         secondary: "240 4% 15%",
         secondaryForeground: "60 5% 85%",
         accent: "240 0% 13%",
         accentForeground: "60 0% 100%",
         destructive: "0 60% 50%",
         destructiveForeground: "0 0% 98%",
         muted: "240 5% 25%",
         mutedForeground: "60 5% 85%",
         card: "240 4% 10%",
         cardForeground: "60 5% 90%",
         popover: "240 5% 15%",
         popoverForeground: "60 5% 85%",
         border: "240 6% 20%",
         input: "240 6% 20%",
         ring: "240 5% 90%",
         "chart-1": "359 2% 90%",
         "chart-2": "240 1% 74%",
         "chart-3": "240 1% 58%",
         "chart-4": "240 1% 42%",
         "chart-5": "240 2% 26%",
      },
      colorsDark: {
         background: "240 5% 6%",
         foreground: "60 5% 90%",
         primary: "240 0% 90%",
         primaryForeground: "60 0% 0%",
         secondary: "240 4% 15%",
         secondaryForeground: "60 5% 85%",
         accent: "240 0% 13%",
         accentForeground: "60 0% 100%",
         destructive: "0 60% 50%",
         destructiveForeground: "0 0% 98%",
         muted: "240 5% 25%",
         mutedForeground: "60 5% 85%",
         card: "240 4% 10%",
         cardForeground: "60 5% 90%",
         popover: "240 5% 15%",
         popoverForeground: "60 5% 85%",
         border: "240 6% 20%",
         input: "240 6% 20%",
         ring: "240 5% 90%",
         "chart-1": "359 2% 90%",
         "chart-2": "240 1% 74%",
         "chart-3": "240 1% 58%",
         "chart-4": "240 1% 42%",
         "chart-5": "240 2% 26%",
      },
      fontFamily: {
         heading: {
            name: "Manrope",
            type: "sans-serif",
         },
         body: {
            name: "Manrope",
            type: "sans-serif",
         },
      },
      radius: 0.5,
   },
] as const

export type ChartTheme = ReturnType<typeof getChartThemes>[number]

export function getChartThemes() {
   return CHART_THEMES.map((theme) => ({
      ...theme,
      cssVars: {
         light: themeColorsToCssVariables(theme.colors),
         dark: themeColorsToCssVariables(theme.colorsDark),
      },
   }))
}
